<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/style.css">
    <title>Document</title>
</head>
<style>
    .user{
        width:135px;
        padding: 15px;
        box-sizing: border-box;
        border: 1px solid #dddddd;
        float: left;
        margin-right: 10px;
    }
    .user--dark-theme{
        background: #222;
    }
    .user--dark-theme .user__photo{
        box-shadow: inset 0 2px 2px rgba(255,255,255,0.35);
    }
    .user--dark-theme .user__name{
        color:#fff;
    }
    .user__photo{
        width:100%;
        display: block;
        border-radius: 50%;
        box-shadow: inset 0 2px 2px rgba(0,0,0,0.35);
    }
    .user__name{
        font-weight: bold;
        text-align: center;
        font-size: 0.9rem;
        padding: 10px 0;
    }
    .button{
        width:100%;
        color: #222;
        background: #ccc;
        padding:7px 12px;
        border: none;
        outline: none;
        border-radius: 2px;
        cursor: pointer;
    }
    .button:active{
        box-shadow: inset 00 4px rgba(0,0,0,0.4);
    }
    .button--primary{
        background: #2388e1;
        color:#fff;
    }
    .button--waring{
        background: #e7131e;
        color:#fff;
    }
</style>
<body>
    <h1>Block Element Modifier - BEM </h1>
    <div class="user">
      <img src="/images/user.png" alt="user" class="user__photo">
      <div class="user__name">
          <span class="user__text">Liangjuan</span> 
          <i class="user__icon"></i>
      </div>
      <button class="button button--primary">查看</button>
      <!-- <button class="button button--waring">删除</button> -->
    </div>
    <div class="user user--dark-theme">
        <img src="/images/user.png" alt="user" class="user__photo">
        <div class="user__name">Liangjuan</div>
        <button class="button button--primary">查看</button>
        <!-- <button class="button button--waring">删除</button> -->
    </div>
</body>
</html>